<!DOCTYPE html>  
<html>  
<head>  
<title>canvas</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>  
<body>

<canvas id="mycanvas" width="800" height="600" style="border: 1px solid;" >
</canvas>

<script language="javascript" type="text/javascript">


var state=0;
position = {
	x: null,
	y: null
}
function set1(event){
	position.x = event.x;
	position.y = event.y;
	state=1;
}
function set0(event){
	state=0;
	
	for(var i=0;i<objNum;i++){
		//var x=event.x;
		//var y=event.y;
		
		objs[i].ax=0;
		objs[i].ay=0;
	}
}
function set2(event){
	if(state==1){
		position.x = event.x;
		position.y = event.y;
	}
}



function robot(xx,yy,theta,h){
	this.x=xx;
	this.y=yy;
	this.vx=0;
	this.vy=0;
	this.ax=0;
	this.ay=0;
	this.scale=h;

	this.draw=function(){
		context.save();
		//var style="rgb(255,80,80)";
		var color=Math.abs(Math.floor(this.vx))*20;
		var style="rgb("+color+","+0+","+(255-color)+")";
		context.fillStyle=style;
		
		/*
		context.shadowColor=style;
		context.shadowOffsetX = this.vx;
		context.shadowOffsetY=this.vy;
		*/
		
		context.beginPath();
		context.arc(this.x,this.y,5,0,Math.PI*2,true);
		context.fill();
		context.restore();

	}
	
	this.change=function(){
		this.vx+=this.ax/20;
		this.vy+=this.ay/20;
		
		if(this.ax==0 & this.ay==0){
			this.vx=this.vx/1.05;
			this.vy=this.vy/1.05;
		}
		this.x+=this.vx;
		this.y+=this.vy;
	}

}




	var lastrand = 31029;

function randint(minn , maxn) {

	var d = lastrand / 32749;

	lastrand = (25903 * lastrand + 19997) % 32749;

	return parseInt(minn + d * (maxn - minn + 1));

}



	var mcanvas =document.getElementById("mycanvas");
	mcanvas.onmousedown= set1;
	
	mcanvas.onmousemove =set2;
	mcanvas.onmouseup= set0;
	
	var context = mcanvas.getContext('2d');
	
	//context.shadowBlur=3;
		
	var tmp=document.createElement("canvas");

	tmp.width="300";

	tmp.height="300";

	var tmpctx=tmp.getContext("2d");

	

	var objs=new Array();

	var objNum=0;// 1100;

	var old;

	var now;

		

	var img=new Image();

	img.src ="r1.jpg";	

	img.onload=init;

	
function force(){
	for(var i=0;i<objNum;i++){
		//var x=event.x;
		//var y=event.y;
		var tmpx=position.x-objs[i].x;
		var tmpy=position.y-objs[i].y;
		var r=Math.sqrt(tmpx*tmpx+tmpy*tmpy);
		objs[i].ax=1*tmpx/(Math.sqrt(r));
		objs[i].ay=1*tmpy/(Math.sqrt(r));
	}
}	




function init(){

	
	/*
	for(var i=0;i<1000;i++){
		
		
		
		var x=randint(0,800);

		var y=randint(0,600);


		//var scale=0.5;

		var t=new robot(x,y,0,0);

		objs.push(t);

	}
	*/
	for(var i=10;i<780;i+=20){
		for(var j=10;j<580;j+=20){
			var t=new robot(i,j,0,0);
			
			objs.push(t);
			objNum++;
		}
	}
	
	benchmark();
	
	
}	

	//var r1=new robot(400,400,0,0.5);

	//r1.draw();

	

	//document.write(""+r1.x);

	

	var tick=9;

	var spend=document.getElementById("spend");

	function benchmark() {
		if(state==1){
			force();
		}

		old= new Date();

		context.clearRect(0, 0, 800, 600);

		for(var i=0;i<objNum;i++){

			objs[i].draw();

			objs[i].change();

		}

		now= new Date();

		tick++;

		//spend.innerText="spend:"+now-old+"ms"

		if((now-old)>1000/30){

			if(tick==10){

				tick=0;

				//spend.innerText="fps:"+parseInt(1000/(now-old));

			}
			
			setTimeout(benchmark,0);

		}

		else{

			setTimeout(benchmark,1000/30-(now-old));

			if(tick==10){

				tick=0;

				//spend.innerText="fps:30";

			}

		}

	}

	//benchmark();

	



</script>  



</body>  

</html> 
